<template>
    <div>
      <template>
        <template>
          <Row style="margin-bottom: 20px">
            <Col span="4">
              <Input v-model="code" placeholder="请输入order_code"/>
            </Col>
            <Col span="4" offset="1">
              <Button type="primary" @click="getOrderList">搜索</Button>
            </Col>
          </Row>
        </template>
      </template>
      <template>
        <Table :columns="columns1" :data="data1">
          <template slot-scope="{ row }" slot="state">
            <strong v-if="row.state==='0'">待受理</strong>
            <strong v-if="row.state==='1'">处理中</strong>
            <strong v-if="row.state==='2'">成功办结</strong>
            <strong v-if="row.state==='3'">办结失败</strong>
            <strong v-if="row.state==='5'">调用不通过</strong>
            <strong v-if="row.state==='7'">待办结</strong>
            <strong v-if="row.state==='8'">转件待受理</strong>
            <strong v-if="row.state==='9'">待提报</strong>
            <strong v-if="row.state==='81'">转件处理中</strong>
            <strong v-if="row.state==='82'">转件待审核</strong>
          </template>
        </Table>
      </template>
      <template>
        <Table :columns="columns2" :data="data2">
        </Table>
      </template>
      <json-view v-if="dockingLogList.length > 0" slot="content" :data="dockingLogList" :deep="5"/>
      <Modal v-model="modal" title="删除原因" width="700" cancel-text="关闭"
        @on-ok="deleteOrder()" @on-cancel="modal = false" ok-text="确定" style="position:relative;">
        <Form ref="paramData" :model="paramData" >
          <Row class="item1">
            <Col span="5" class="ivu-form-item-label">删除原因:</Col>
            <Col span="14" class="ivu-form-item-content">
              <Input v-model="paramData.del_msg" placeholder=""></Input>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal v-model="modal2" title="办结失败原因" width="700" cancel-text="关闭"
        @on-ok="updateOrder3Forkefu()" @on-cancel="modal2 = false" ok-text="确定" style="position:relative;">
        <Form ref="paramData" :model="paramData" >
          <Row class="item1">
            <Col span="5" class="ivu-form-item-label">办结失败原因:</Col>
            <Col span="14" class="ivu-form-item-content">
              <Input v-model="paramData.msg" placeholder=""></Input>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal v-model="modal1" title="是否重新推送至政务系统？" width="700" cancel-text="关闭"
        @on-ok="updateSendAgain(paramData)" @on-cancel="modal1 = false" ok-text="确定" style="position:relative;">
      </Modal>

      <Modal v-model="ExtractionCodeModal" title="图片信息" width="900" style="position:relative;">
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>正在加载图片...</div>
            </Spin>
          </Col>
        </Row>
        <div id="printMe1">
          <img :src="img_url" style="width: 100%"/>
        </div>
        <div slot="footer">
          <Button type="primary" @click="ExtractionCodeModal=false" >确定</Button>
          <Button type="success" v-print="'#printMe1'" >打印</Button>
        </div>
      </Modal>
      <!-- <Collapse style="margin-top:20px">
          <div v-for="(item, index) in dockingLogList" :key="index">
          <Panel :name="index.toString()+'a'">
            {{item.create_time}}{{item.funcation_desc}}
            <json-view slot="content" :data="item" :deep="3"/>
          </Panel>
          </div>
      </Collapse> -->
<!--      api/as/csc/auditorder/getOrderByCode
getOrderByCode-->
    </div>
</template>

<script>
import { getOrderInfoBycodeForKefu, updateSendAgain, getKefuOrderProcessList, createPostImg, iteminf } from '@/api/eventlist'
import { deleteOrderAndSaveLogTokefu, updateOrder3Forkefu } from '@/api/customer-service'
import jsonView from 'vue-json-views'

export default {
  name: 'index',
  components: {
    jsonView
  },
  data () {
    return {
      searchInfo: {},
      paramData: {},
      modal: false,
      modal1: false,
      modal2: false,
      img_url: '',
      loadData: true,
      ExtractionCodeModal: false,
      code: '',
      columns1: [
        { title: '事项', key: 'title', width: 150 },
        { title: '业务编号', key: 'code', width: 150 },
        { title: '申请人', key: 'name', width: 80 },
        { title: '手机号', key: 'mobile', width: 115 },
        { title: '身份证', key: 'cardno', width: 160 },
        { title: '社区名称', key: 'notice_company', width: 160 },
        { title: '社区编码', key: 'company_code', width: 160 },
        { title: '状态', slot: 'state', width: 85, align: 'center' },
        { title: '申请时间', key: 'create_time', width: 140, align: 'center' },
        { title: '原因', key: 'reason', width: 200, align: 'center' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          minWidth: 150,
          fixed: 'right',
          render: (h, params) => {
            let abc = [h('Button', {
              props: {
                type: 'error',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.modal = true
                  this.paramData.code = params.row.code
                }
              }
            }, '删除'),
            h('Button', {
              props: {
                type: 'warning',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.modal2 = true
                  this.paramData.code = params.row.code
                }
              }
            }, '办结')]
            if (params.row.type_id !== '11210101000000FCJD') {
              abc.push(
                h('Button', {
                  props: { type: 'success', size: 'small' },
                  style: { marginRight: '5px' },
                  on: {
                    click: () => {
                      this.updateInfo(params.row, '2')
                    }
                  }
                }, '查看')
              )
            }
            if (params.row.title === '申请办理社区居住证明') {
              abc.push(
                h('Button', {
                  props: { type: 'primary', size: 'small' },
                  style: { marginRight: '5px', backgroundColor: '#598ED1', borderColor: '#598ED1' },
                  on: {
                    click: () => {
                      this.getExtractionCode(params.row)
                    }
                  }
                }, '获取照片')
              )
            }
            return h('div', abc)
          }
        }
      ],
      columns2: [
        { title: '处理人名称', key: 'handle_byname', width: 150, align: 'center' },
        { title: '处理人', key: 'handle_by', width: 150, align: 'center' },
        { title: '处理时间', key: 'handle_time', width: 200, align: 'center' },
        { title: '受理社区编号', key: 'accept_company_code', width: 150, align: 'center' },
        { title: '受理社区名称', key: 'accept_company_name', width: 200, align: 'center' },
        { title: '操作附加信息', key: 'params', width: 200, align: 'center' },
        { title: '其他系统同步状态', key: 'sync_system', width: 85, align: 'center' },
        { title: '同步业务系统结果', key: 'sync_system_res', width: 200, align: 'center' },
        { title: '同步政务系统状态', key: 'sync_government', width: 85, align: 'center' },
        { title: '同步政务系统结果', key: 'sync_gov_result', width: 200, align: 'center' },
        { title: '同步营商时间', key: 'sync_gov_time', width: 200, align: 'center' },
        { title: '用时', key: 'used_time', width: 200, align: 'center' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          minWidth: 80,
          fixed: 'right',
          render: (h, params) => {
            if (params.row.sync_government === '2') {
              let abc = [h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.modal1 = true
                    this.paramData.id = params.row.id
                  }
                }
              }, '重新推送')]
              return h('div', abc)
            }
          }
        }
      ],
      data1: [],
      data2: [],
      dockingLogList: []
    }
  },
  methods: {
    getOrderList () {
      let data = {
        code: this.code
      }
      getOrderInfoBycodeForKefu(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data1 = []
          // console.log(ret.data.data)
          this.data1.push(ret.data.data)
          this.dockingLogList = []
          this.dockingLogList = ret.data.data.dockingLogList
          // var a = []
          for (var i = 0; i < this.dockingLogList.length; i++) {
            var item = this.dockingLogList[i]
            item.response_content = JSON.parse(item.response_content)
            var requset_content = item.requset_content.split('||')
            item.requset_content = JSON.parse(requset_content[0])
            item.Basic = requset_content[1]
            // item.requset_content = JSON.parse(item.requset_content)
          }
          // this.dockingLogList = a
          console.log(ret.data.data)
          return
        }
        this.data1 = []
      })
      this.getKefuOrderProcessList()
    },
    deleteOrder () { // 删除订单
      if (confirm('确定删除吗？请谨操作')) {
        deleteOrderAndSaveLogTokefu(this.paramData).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '成功', desc: '已成功删除订单' })
            this.getOrderList()
            return
          }
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        })
      }
    },
    updateOrder3Forkefu () { // 办结订单
      if (confirm('确定办结失败吗？请谨操作')) {
        updateOrder3Forkefu(this.paramData).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '成功', desc: '已成功办结订单' })
            this.getOrderList()
            return
          }
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        })
      }
    },
    updateSendAgain (params) {
      let data = {
        id: params.id
      }
      updateSendAgain(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功', desc: '已成功修改推送状态' })
          this.getOrderList()
          return
        }
        this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
      })
    },
    getKefuOrderProcessList () {
      let data = {
        order_code: this.code
      }
      getKefuOrderProcessList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data2 = ret.data.data
          return
        }
        this.data2 = []
      })
    },
    getExtractionCode (item) {
      item.order_code = item.code
      this.searchInfo = item
      createPostImg(item).then(res => {
        if (res.data.errcode === 0) {
          this.img_url = res.data.data.img_url
          this.beforeCreate(this.img_url)
          this.ExtractionCodeModal = true
        } else {
          this.$Notice.error({ title: '获取提取码失败', desc: res.data.errmsg })
          this.ExtractionCodeModal = false
        }
      })
    },
    beforeCreate (img) {
      this.loadData = true
      let image = new Image()
      image.src = img
      image.onload = () => {
        console.log(img)
        this.loadData = false
      }
    },
    // 修改订单operation=1|查看订单operation=2
    updateInfo (item, operation) {
      if (item.item_id === '11210101000000MZJD5212000330000') {
        this.$router.push({
          name: 'db_subsistenceapplication',
          params: { cardno: item.cardno, code: item.code, operation: operation, itemid: item.item_id, order_state: item.state, ke_fu: true }
        })
      } else if (item.item_id === '11210101000000MZJD5212000327000') {
        let param = {
          cardno: item.cardno,
          id: item.item_id,
          code: item.code,
          params: '1'
        }
        iteminf(param).then(res => {
          if (res.data.errcode === 0) {
            let paramData = JSON.parse(res.data.data.form_params)
            console.log(paramData, '\\\\\\\\\\\\\\\\\\')
            this.$router.push({
              name: 'cn_subsidyacceptance',
              params: {
                subsidy_type: paramData.subsidy_type,
                cardno: item.cardno,
                name: item.name,
                code: item.code,
                operation: operation,
                itemid: item.item_id,
                order_state: item.state,
                paramData: paramData,
                ke_fu: true
              }
            })
            // console.log(paramData.infoMap, 'res.data.data')
          }
        })
      } else if (item.item_id === '11210101000000MZJD5212000351000') {
        this.$router.push({
          name: 'subsistenceapplication',
          params: { cardno: item.cardno, code: item.code, operation: operation, itemid: item.item_id, order_state: item.state, ke_fu: true }
        })
      } else if (item.item_id === '11210101000000MZJD5212000322000') {
        this.$router.push({
          name: 'tk_subsistenceapplication',
          params: { cardno: item.cardno, code: item.code, operation: operation, itemid: item.item_id, order_state: item.state, ke_fu: true }
        })
      } else if (item.item_id.indexOf('11210101000000FCJD') === 0) {
        this.$router.push({
          name: 'house_handinformation',
          params: {
            itemid: item.item_id,
            cardno: item.cardno,
            code: item.code,
            name: item.name,
            cur_data: { tabindex: '', pageNo: '' },
            operation: operation,
            ke_fu: true
          }
        })
      } else if (item.code === 'SQ1598237931558') {
        this.$router.push({
          name: 'db_subsistenceapplication',
          params: {
            itemid: item.item_id,
            cardno: item.cardno,
            code: item.code,
            name: item.name,
            order_state: item.state,
            cur_data: { tabindex: '', pageNo: '' },
            operation: operation,
            ke_fu: true
          }
        })
      } else {
        this.$router.push({
          name: 'handinformation',
          params: {
            itemid: item.item_id,
            cardno: item.cardno,
            code: item.code,
            name: item.name,
            cur_data: { tabindex: '', pageNo: '' },
            operation: operation,
            state: item.state,
            ke_fu: true
          }
        })
      }
    }
  }

}
</script>

<style scoped>
  .item1{
    height: 42px;
    line-height: 40px;
  }

</style>
